<template>
  <div class="swaper">
    <div class="box">
        <div class="boxleft">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in images" :key="index">
                    <img :src="item.img" :alt="item.alt">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="boxright">
            <div class="tops">
                <div class="dian">
                    <div class="title">
                        <h3>手机电脑</h3>
                        <h3>家具家装</h3>
                    </div>
                    <div class="img">
                        <img src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/09/09/13/14673207c2ca4eab8e8e5b6e4ae5b499.png?format=_is_200w_200h_4e" alt="">
                        <img src="https://imgservice.suning.cn/uimg1/sniss/improve/fANIiehwHWdt54gfmI2FBw.jpg?format=_is_200w_200h_4e" alt="">
                    </div>
                    <div class="text">
                        <span>抢1000卷</span>
                        <span>每300减40</span>
                    </div>
                </div>
            </div>
            <div class="tops">
                <div class="dian">
                    <div class="title">
                        <h3>冰洗钜惠</h3>
                        <h3>超市滋补季</h3>
                    </div>
                    <div class="img">
                        <img src="https://imgservice.suning.cn/uimg1/sniss/improve/N5zTa0wh3ZNHtTB8orCUDQ.jpg?format=_is_200w_200h_4e" alt="">
                        <img src="https://image2.suning.cn/uimg/cms/img/166910239684365323.png" alt="">
                    </div>
                    <div class="text">
                        <span>每千减百</span>
                        <span>满169减30</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue';
// import { Lazyload } from 'vant';
import { swaper } from '../api/index.js'
export default {
    data() {
        return {
            images: [],
        };
    },
    mounted() {
        swaper().then((ok) => {
            // console.log(ok.data.data)
            this.images=ok.data.data;
        })
    }
}
</script>

<style lang="scss" scoped>
.swaper{
    width: 100%;
    height: 2.42rem;
    .box{
        width: 95%;
        height: 2.21rem;
        margin: 0.09rem 2.5% 0.14rem 2.5%;
        display: flex;
        justify-content: space-between;
        .boxleft{
            width: 1.73rem;
            height: 100%;
            box-sizing: border-box;
            border-radius: 0.09rem;
            .van-swipe{
                border-radius: 0.09rem;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            
        }
        .boxright{
            width: 1.73rem;
            height: 100%;
            .tops{
                height: 1.07rem;
                width: 100%;
                background-image: url('../../public/lu.png');
                background-size: 100% 100%;
                font-size: 0.12rem;
                &:nth-child(1){
                    margin-bottom: 0.06rem;
                }
                .title{
                    display: flex;
                    justify-content: space-around;
                    color: #f2faff;
                }
               .dian{
                .img{
                    img{
                        width: 0.6rem;
                        height:0.6rem ;
                        margin-top: 0.1rem;
                        margin-left: 0.14rem;
                    }

                }
                .text{
                    margin-left: 0.1rem;
                    position: absolute;
                    span{
                        position:relative;
                        top: -0.08rem;
                        display: inline-block;
                        background-color: #ff4b19;
                        color: #ffcec6;
                        border-radius: 0.07rem;
                        padding: 0 0.06rem;
                        &:nth-child(1){
                            margin-left: 0.03rem;
                            margin-right: 0.2rem;
                        }
                    }
                }
               }
            }
        }
    }
}
</style>